<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
  name: "ChangeSymbolPosition.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
      MapboxCommonService.setCZBP(map, [0, 0], 0)

      // 使用实时 GeoJSON 数据流来移动地图上的符号 symbol。
      const url = 'https://wanderdrone.appspot.com/'
      window.setInterval(() => {
        map.getSource('drone').setData(url);
      }, 2000);

      map.addSource('drone', {type: 'geojson', data: url});
      map.addLayer({
        "id": "drone",
        "type": "symbol",
        "source": "drone",
        "layout": {
          "icon-image": "rocket-15"
        }
      });
    };

    return {
      mapOnLoadCB,
    }
  }
}
</script>

<style scoped lang="scss">

</style>